import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { getComponentType } from '../../../api/component/index';
import { Form, Input, Button, Checkbox, Row, Col } from 'antd';
import {setOpen} from '../action/actions.js';
import Tags from './tags';
function mapStateToProps(state) {
  return {
    openDrawer: state.openDrawer,
	componentTypeList:state.componentTypeList
  };
}
// mapDispatchToProps：将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    setOpenDrawer(data) {
      dispatch(setOpen(data));
      // 执行setPageTitle会返回一个函数
      // 这正是redux-thunk的所用之处:异步action
      // 上行代码相当于
      /*dispatch((dispatch, getState) => {
            dispatch({ type: 'SET_PAGE_TITLE', data: data })
        )*/
    },
  };
};

class Search extends React.Component {
  state = {
    selectedTags: ['Books'],
  };
  
		 

  onFinish = (values) => {
    console.log('Success:', values);
  };

  onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  handleTagsChange = (selectedTags) => {
    this.setState({
      selectedTags: selectedTags,
    });
  };

  render() {
    const { selectedTags } = this.state;
    return (
      <>
        <Form
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
          autoComplete="off"
        >
          <Form.Item label="组件类型" name="type">
            <Tags
              tagsData={this.props.componentTypeList}
              handleChange={this.handleTagsChange}
            ></Tags>
          </Form.Item>

          <Form.Item label="其他选项" name="other" style={{ width: '50%' }}>
            <Row align="middle" gutter={8}>
              <Col>
                <span>配置</span>
              </Col>
              <Col>
                <Input />
              </Col>
            </Row>
          </Form.Item>
        </Form>
      </>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Search);
